<template>
  <div class="space-y-6">
    <!-- 今日热门 -->
    <div class="bg-white rounded-xl shadow-sm p-5">
      <h3 class="font-semibold text-gray-900 mb-4 flex items-center">
        <i class="fa fa-fire text-accent mr-2"></i>
        今日热门(未实现)
      </h3>
      <div class="space-y-4">
        <a href="#" class="block group">
          <h4 class="text-sm font-medium text-gray-800 group-hover:text-primary transition-colors line-clamp-2">
            2023年前端开发必备工具推荐
          </h4>
          <p class="text-xs text-gray-500 mt-1">
            328次浏览 · 56条评论
          </p>
        </a>
        <a href="#" class="block group">
          <h4 class="text-sm font-medium text-gray-800 group-hover:text-primary transition-colors line-clamp-2">
            JavaScript异步编程完全指南
          </h4>
          <p class="text-xs text-gray-500 mt-1">
            296次浏览 · 42条评论
          </p>
        </a>
        <a href="#" class="block group">
          <h4 class="text-sm font-medium text-gray-800 group-hover:text-primary transition-colors line-clamp-2">
            CSS Grid布局实战技巧分享
          </h4>
          <p class="text-xs text-gray-500 mt-1">
            251次浏览 · 35条评论
          </p>
        </a>
      </div>
    </div>
    
    <!-- 活跃用户 -->
    <div class="bg-white rounded-xl shadow-sm p-5">
      <h3 class="font-semibold text-gray-900 mb-4">活跃用户(未实现)</h3>
      <div class="space-y-4">
        <div class="flex items-center justify-between">
          <div class="flex items-center space-x-3">
            <img src="https://picsum.photos/seed/user5/40/40" alt="用户头像" class="w-8 h-8 rounded-full object-cover">
            <span class="text-sm font-medium text-gray-800">陈七</span>
          </div>
          <button class="text-xs text-primary border border-primary rounded-full px-3 py-1 hover:bg-primary/5 transition-colors">
            关注
          </button>
        </div>
        <div class="flex items-center justify-between">
          <div class="flex items-center space-x-3">
            <img src="https://picsum.photos/seed/user6/40/40" alt="用户头像" class="w-8 h-8 rounded-full object-cover">
            <span class="text-sm font-medium text-gray-800">赵八</span>
          </div>
          <button class="text-xs text-primary border border-primary rounded-full px-3 py-1 hover:bg-primary/5 transition-colors">
            关注
          </button>
        </div>
        <div class="flex items-center justify-between">
          <div class="flex items-center space-x-3">
            <img src="https://picsum.photos/seed/user7/40/40" alt="用户头像" class="w-8 h-8 rounded-full object-cover">
            <span class="text-sm font-medium text-gray-800">孙九</span>
          </div>
          <button class="text-xs text-primary border border-primary rounded-full px-3 py-1 hover:bg-primary/5 transition-colors">
            关注
          </button>
        </div>
      </div>
    </div>
    
    <!-- 热门话题 -->
    <div class="bg-white rounded-xl shadow-sm p-5">
      <h3 class="font-semibold text-gray-900 mb-4">热门话题(未实现)</h3>
      <div class="flex flex-wrap gap-2">
        <a href="#" class="px-3 py-1 bg-gray-100 text-gray-600 text-sm rounded-full hover:bg-gray-200 transition-colors">
          #前端开发
        </a>
        <a href="#" class="px-3 py-1 bg-gray-100 text-gray-600 text-sm rounded-full hover:bg-gray-200 transition-colors">
          #React
        </a>
        <a href="#" class="px-3 py-1 bg-gray-100 text-gray-600 text-sm rounded-full hover:bg-gray-200 transition-colors">
          #Vue
        </a>
        <a href="#" class="px-3 py-1 bg-gray-100 text-gray-600 text-sm rounded-full hover:bg-gray-200 transition-colors">
          #JavaScript
        </a>
        <a href="#" class="px-3 py-1 bg-gray-100 text-gray-600 text-sm rounded-full hover:bg-gray-200 transition-colors">
          #CSS
        </a>
      </div>
    </div>
    
  </div>
</template>

<script setup lang="ts">
// 可以在这里添加交互逻辑
</script>

<style scoped>
/* 组件特定样式 */
</style>